<template>
  <div class="app-container">
    <!-- 所属实体 -->
    <div class="bean-container">
      <h3 class="entity-title">角色</h3>
      <el-row class="last_line">
        <el-col :span="12">
          <div class="cell-title">角色:</div>
          <div class="cell-content">{{entity.name}}</div>
        </el-col>
        <!-- <el-col :span="12" >
          <div class="cell-title">模型:</div>
          <div class="cell-content">{{entity.model}}</div>
        </el-col> -->
      </el-row>
    </div>
    <!-- 筛选 -->
    <div class="filter-container">
      <el-input v-model="listQuery.name" placeholder="名称" style="width: 400px;" class="filter-item" @keyup.enter.native="handleFilter"/>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{ $t('table.search') }}</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" @click="checkAll">全选</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" @click="resetPermission">重置</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" @click="save">保存</el-button>
    </div>
    <div class="permission-container">
      <div
        class="cell-container"
        v-for="(contentType, key) in list"
        :key="key"
      >
        <h3 class="cell-title title-line">{{contentType.app_label}}-{{contentType.model}}</h3>
        <el-row>
          <el-col :span="24">
            <el-checkbox-group v-model="checkdList" size="medium">
            <el-checkbox-button v-for="permission in contentType.permissionModelList" :label="permission.id" :key="permission.id">{{permission.name}}</el-checkbox-button>
          </el-checkbox-group>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import permissionService from '@/api/permission'
import roleService from '@/api/role'
import contentTypeService from '@/api/content_type'


import waves from '@/directive/waves' // 水波纹指令

export default {
  name: 'UserList',
  directives: {
    waves
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      rolePermissionList: [],
      checkdList: [],
      total: null,
      listLoading: true,
      listQuery: {
        pageNum: 1,
        pageSize: 20,
        // importance: undefined,
        name: '',
        with: 'permission'
      },  
      // 所属实体，这里就是content_type
      entity: {
        id: 0,
        name: '',
        // model: ''
      },
      rules: {
        name: [{ required: true, message: 'name is required', trigger: 'blur' }]
      },
      isAllChecked: false
    }
  },
  async created() {
    await this.getEntity()
    await this.getList()
    await this.getRolePermission()
  },
  methods: {
    async getEntity() {
      const ret  = await roleService.get(this.$route.params.role_id)
      this.entity = ret.data
      this.listQuery.menuId = this.entity.id
    },
    async getList() {
      const ret = await contentTypeService.getList(this.listQuery)
      this.list = ret.data.list
      this.total = ret.data.total
      setTimeout(() => {
        this.listLoading = false
      }, 1.5 * 1000)
    },
    async getRolePermission() {
      const ret = await roleService.getRolePermissionByRoleId(this.entity.id)
      this.rolePermissionList = ret.data.list
      // 合并权限列表到选择列表中
      this.mergePermission()
    },
    mergePermission() {
      this.rolePermissionList.length >0 
      && this.rolePermissionList.map(res=>{
        this.checkdList.push(res.permissionId)
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    async save() {
      // const permissionIds = this.checkdList.join(',')
      const role_id = this.entity.id
      const data = {
        roleId: role_id,
        permissionIds: this.checkdList
      }

      const ret = roleService.setRolePermission(data)
      this.$message({
        message: '保存成功',
        type: 'success'
      })
    },
    checkAll() {
      this.isAllChecked = !this.isAllChecked;
      if(this.isAllChecked == false) {
        this.checkdList = [];
      } else{
        this.setAllChecked()
      }
    },
    setAllChecked() {
      this.checkdList = []
      this.list.length > 0
      && this.list.map(model=>{
        model.permissionModelList.length > 0
        && model.permissionModelList.map(permission => {
          this.checkdList.push(permission.id)
        })
      })
    },
    // 重置初始权限
    resetPermission() {
      this.checkdList = []
      this.mergePermission()
    }
    
  }
}
</script>
<style scoped>
.slideShow {
  transform: translateX(0)!important;
  transition: transform .2s, -webkit-transform .2s;
}
.bean-container {
  margin-bottom: 10px;
}
.entity-title {
  font-size: 14px;
}
.cell-title {
  font-size: 12px;
  color: #2c2c2c;
  display: inline-block;
}
.title-line {
  padding-bottom: 5px; 
  border-bottom: 1px solid #eeeeee;
  width: 100%;
}
.cell-content {
  font-size: 12px;
  color: #2c2c2c;
  display: inline-block;
}
.last_line {
  padding-bottom: 5px; 
  border-bottom: 1px solid #eeeeee;
}
</style>
